<template>
  <div>
    <!-- 表头 -->
    <div class="head">
      <div class="header-one">
        <div class="iconfont icon-left jiantou" @click="$router.push('/')"></div>
        <div class="gouwu">购物车</div>
        <div class="iconfont icon-ellipsis classi"></div>
      </div>
    </div>
    <!-- 表中 -->
    <div class="center">
      <div class="denglu">
        <div class="PC">
          <span>登录</span>后可同步电脑与手机购物车中的商品
        </div>
        <i class="iconfont icon-right"></i>
      </div>
      <div class="tu">
        <div class="pic">
          <img src="../assets/gouwuche.png" alt />
        </div>
        <div class="bian">购物车快饿扁了/(ㄒoㄒ)/~~</div>
        <div class="Boss">主人快点给我挑点宝贝吧！</div>
        <div class="button">去逛逛</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.button{
    display: inline-block;
    padding: 0 1rem;
    height: 0.57rem;
    line-height: 0.57rem;
    background: #e6163f;
    color: #fff;
    font-size: 0.24rem;
    border-radius: 0.05rem;
}
.Boss {
  font-size: 0.21rem;
  color: #666666;
  line-height: 0.65rem;
}
.bian {
  font-size: 0.23rem;
  color: #000;
  padding-top: 0.2rem;
  line-height: 0.4rem;
}
.pic {
  padding-top: 0.4rem;
}
.pic img {
  width: 1.35rem;
  height: 1.35rem;
}
.tu {
  text-align: center;
}
body {
  background: #f5f5f5;
}
.PC span {
  color: #e6163f;
}
.denglu {
  height: 0.6rem;
  padding: 0 0.2rem;
  line-height: 0.6rem;
  font-size: 0.21rem;
  color: #333333;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  justify-content: space-between;
}
.denglu i {
  color: #ccc;
  font-size: 0.3rem;
}
.header-one {
  display: flex;
  align-items: center;
  border-color: #ddd;
  background-color: #f5f5f5;
  color: #444;
  justify-content: space-between;
  padding: 0.1rem 0.2rem;
  border-bottom: 1px solid #ddd;
}
.gouwu {
  font-size: 0.3rem;
}
.jiantou {
  color: #999;
  font-size: 0.35rem;
}
.classi {
  font-size: 0.55rem;
  color: #666;
}
</style>